<template>
  <view class="p-deleted-box">
    <view class="content">
      <view class="image-box" :style="{'margin-top': goodsList && goodsList.length > 0 ? '' : '150px'}">
        <x-image src="/assets/images/off-shelf-goods.png"></x-image>
      </view>
      <view class="desc">{{ msg }}</view>
    </view>
    <!-- 看了又看 -->
    <view class="other-goods" v-if="goodsList && goodsList.length > 0">
      <view class="_img">
        <x-image src="/assets/images/common-recommend-look.png" mode="widthFix"></x-image>
      </view>
      <view class="recommend">
        <x-goods-list :list="goodsList"></x-goods-list>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XGoodsList from '@/components/x-goods-list';
export default {
  name: 'PDeletedBox',
  components: {
    XGoodsList,
    XImage
  },
  props: {
    productId: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: '抱歉，该商品跑丢了！'
    }
  },
  data() {
    return {
      leftTime: 5,
      goodsList: null
    };
  },
  computed: {},
  watch: {
    goodsList(val) {
      this.goodsList = val;
    }
  },
  created() {
    // this.countDown();
    this.getGoodsList();
  },
  methods: {
    //  获取商品推荐信息
    async getGoodsList() {
      const params = {
        productId: this.productId
      };
      this.$http({
        login: true,
        url: '/product/app/spu/related',
        method: 'get',
        report: true,
        data: params
      }).then(res => {
        this.goodsList = res.data ? res.data : null;
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.p-deleted-box{
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  //display: flex;
  //padding-bottom: 200px;
  .content{
    margin: 200px auto 0;
    text-align: center;
    .image-box{
      width: 160px;
      height: 160px;
      margin: 0 auto;
    }

    .desc{
      margin-top: 32px;
      font-size: 32px;
      color: #999999;
    }
    // 看了又看/推荐
    .other-goods{

      ._img{ padding: 24px 170px;}
      .recommend{
        padding: 0 24px;
      }
    }

    //.button-box{
    //  width: 200px;
    //  margin: 40px auto 20px;
    //}
    //
    //.count-down{
    //  color: #a4a4a4;
    //  .left-time{
    //    color: #72A7D9;
    //  }
    //}
  }
}
</style>
